<template>
    <div class="mt-20">
        <div class="nav mb-40">
            <div v-for="(item, index) in navList" :key="index" class="list" @click="goPath(item.path, item.name)">
                <div class="imgBox"><img :src="item.icon" alt=""></div>
                <div class="mt-15 text-center name text-color">{{ item.name }}</div>
            </div>
        </div>
        <div class="nav mb-44">
            <div v-for="(item, index) in navList1" :key="index" class="list" @click="goPath(item.path, item.name)">
                <div class="imgBox"><img :src="item.icon" alt=""></div>
                <div class="mt-15 text-center name text-color">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    props: {

    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    data() {
        return {
            navList: [],
            navList1: []
        }
    },
    methods: {
        goPath(path, name) {
            if (path == '/more') {
                this.$toast(this.$t("敬请期待"))

            } else {
                this.$router.push(path)
            }
        }
    },
    mounted() {
        this.navList = [
            {
                name: this.$t('闪兑'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
                path: '/exchange/exchangePage'
            },
            // {
            //     name: this.$t('返佣'),
            //     icon: require(`../../assets/theme/${this.theme}/image/nav/rebates.png`),
            //     path: '/promote'
            // },
            {
                name: 'C2C',
                icon: require(`../../assets/theme/${this.theme}/image/nav/rebates.png`),
                path: '/wantBuy'
            },
            {
                name: this.$t('合约交易'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
                path: '/trendDetails/btc'
            },
            {
                name: this.$t('理财'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
                path: '/fm-home'
            },
            {
                name: this.$t('现货账户'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
                path: '/funds'
            },
        ]
        this.navList1 = [
            {
                name: this.$t('助力贷'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/coin.png`),
                path: '/loan'
            },
            {
                name: this.$t('智能矿池'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/pool.png`),
                path: '/machine'
            },
            {
                name: this.$t('质押借币'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/pledge.png`),
                path: '/pledgeLoan'
            },
            {
                name: this.$t('账变记录'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/record.png`),
                path: '/accountChange'
            },
            {
                name: this.$t('更多'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/more.png`),
                path: '/more'
            }
        ]
    },
    activated() {
        this.navList = [
            {
                name: this.$t('闪兑'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
                path: '/exchange/exchangePage'
            },
            // {
            //     name: this.$t('返佣'),
            //     icon: require(`../../assets/theme/${this.theme}/image/nav/rebates.png`),
            //     path: '/promote'
            // },
            {
                name: 'C2C',
                icon: require(`../../assets/theme/${this.theme}/image/nav/rebates.png`),
                path: '/wantBuy'
            },
            {
                name: this.$t('合约交易'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
                path: '/trendDetails/btc'
            },
            {
                name: this.$t('理财'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
                path: '/fm-home'
            },
            {
                name: this.$t('现货账户'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
                path: '/funds?tab=1'
            },
        ]
        this.navList1 = [
            {
                name: this.$t('助力贷'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/coin.png`),
                path: '/loan'
            },
            {
                name: this.$t('智能矿池'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/pool.png`),
                path: '/machine'
            },
            {
                name: this.$t('质押借币'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/pledge.png`),
                path: '/pledgeLoan'
            },
            {
                name: this.$t('账变记录'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/record.png`),
                path: '/accountChange'
            },
            {
                name: this.$t('更多'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/more.png`),
                path: '/more'
            }
        ]
    },
}
</script>

<style lang="scss" scoped>
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #21262F;
}

.list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 20%;

    @include themify() {
        color: themed("text_color");
    }

    margin: 0 10px;

}

.imgBox {
    width: 44px;
    height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
}

.name {
    min-height: 60px;
    width: 120px;
    white-space: normal
}
</style>
